/*
  学习目标：useEffect发请求获取数据
  1. 下载axios
  2. 封装request.js
  3. 封装API函数
  4. 封装异步函数
  5. 在useEffect模拟挂载后,发送请求

*/
import React, { useEffect, useState } from 'react';
import { getChannelsAPI } from './api/channel';

export default function App() {
  const [list, setList] = useState([]);

  const loadData = async () => {
    const res = await getChannelsAPI();
    setList(res.data.channels);
  };

  // 💥useEffect接收同步的回调函数, 不能是异步函数
  useEffect(() => {
    loadData();
  }, []);

  return (
    <div>
      App
      {list.map((item) => {
        return <div key={item.id}>{item.name}</div>;
      })}
    </div>
  );
}
